<template>
	<view class="task-details">
		<view class="title">
			{{detailInfo.title}}
		</view>
		<view class="content">
			{{detailInfo.content}}
		</view>
		<view class="images">
			<image :src="path" v-for="(path, i) in detailInfo.dst_pictures" :key="i" mode="aspectFill" @click="previewImage(detailInfo.dst_pictures, i)"></image>
		</view>
		<view v-if="!options.myPublish">
			<view class="textarea-box" v-if="!detailInfo.stuCompleteTask">

				<text-editor id-name="editor" :info="editorInfo" @chooseFile="chooseFile"></text-editor>
				<view class="all-img-file">
					<view class="imgs">
						
						<view class="img-box" v-for="(item, i) in sendImages" :key="i">
							<image class="img" :src="api.xiaodeObsUrl+item.path" mode="aspectFill"></image>
							<image class="close" @click="delFiles(i, sendImages)" src="/static/chat/close.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="files">
						<view class="file-box" v-for="(item, i) in sendfiles" :key="i">
							<zy-file :src="item.path" :name="item.name" :size="item.size"></zy-file>
							<image class="close" @click="delFiles(i, sendfiles)" src="/static/chat/close.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="tips">
					<text>*需上传图片</text>
				</view>
			</view>
			<view class="textarea-box1" v-else>
				<text-editor :id-name="`editor`" :read-only="true" 
								:info="{content: detailInfo.stuCompleteTask.content, height: 'auto'}"></text-editor>
				<view class="all-img-file">
					<view class="imgs">
						<view class="img-box" v-for="(path, i) in detailInfo.dst_imgs" :key="i">
							<image class="img" @click="previewImage(detailInfo.dst_imgs, i)" :src="path" mode="aspectFill"></image>
						</view>
					</view>
					<view class="files">
						<view class="file-box" v-for="(file, i) in detailInfo.files" :key="i">
							<zy-file :src="file.path" :name="file.name" :size="file.size"></zy-file>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="time-publish">
			<text>发布时间：{{handleTime(detailInfo)}}</text>
			<view v-if="!detailInfo.stuCompleteTask&&!options.myPublish" class="pub-btn" @click="submitTask(detailInfo)">立即发布</view>
		</view>
		<view class="eva-content" v-if="detailInfo.stuCompleteTask && detailInfo.stuCompleteTask.state==2">
			<view class="tea-info">
				<image :src="detailInfo.stuCompleteTask.teaPic?api.xiaodeObsUrl+detailInfo.stuCompleteTask.teaPic:'/static/te1.png'" mode="aspectFill"></image>
				<text>{{detailInfo.stuCompleteTask.teaName}}</text>
			</view>	
			<view class="eva-score">
				<image :src="`/static/score${i<=detailInfo.stuCompleteTask.score_teacher?1:''}.png`" v-for="i in 3" :key="i" mode="aspectFill"></image>
			</view>
			<view class="eva-text">
				{{detailInfo.stuCompleteTask.evaluate_content}}
			</view>
		</view>
	</view>
</template>
<script>
import textEditor from './components/text-editor.vue'
// import ZyFile from '../../uni_modules/zy-file/components/zy-file/zy-file.vue';
export default {
	components: {
		textEditor
		// ZyFile
	},
	data() {
		return {
			options: {}, // 页面参数
			userId: '',
			showUpload: false,
			sendImages: [],
			sendfiles: [],
			focus: false,
			detailInfo: {},
			editorInfo: {
				show: true,
				bottom: '0',
				showUpload: false,
				content: '',
				placeText: '请填写任务详情'
			},
			taskId: ''
		}
	},
	onShow() {
		this.focus = true
		this.showUpload = false
		uni.hideKeyboard()
	},
	onLoad(options){
		this.options = options
		this.taskId = options.taskId
		this.userId = uni.getStorageSync('tokenObj').userId
		// this.detailInfo = uni.getStorageSync('taskDetailsInfo')
		
		this.getTaskDetails()
	},
	methods: {
		handleTime(item){
			let time = item.stuCompleteTask ? item.stuCompleteTask.add_time : item.update_time;
			if(!time) return
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		getTaskDetails(){
			let path = '',
			params = {}
			if(this.options.trajectory==1){
				path = 'ordinary/findTaskDetailsInTrajectory'
				params.taskUserId = this.taskId
			}else{
				path = 'ordinary/findTaskDetails'
				params.taskId = this.taskId
			}
			this.api.get(path, params).then(res=>{
				if(res.data.state != 'ok') return
				this.detailInfo = res.data.ordinaryTask
				let userTask = res.data.ordinaryUserTask
				this.detailInfo.stuCompleteTask = userTask
				let pictures = JSON.parse(this.detailInfo.pictures),
				dstPictures = []
				if(pictures.length>0){
					for(let i=0; i<pictures.length; i++){
						dstPictures.push(this.api.xiaodeObsUrl + pictures[i].path)
					}
					this.$set(this.detailInfo, 'dst_pictures', dstPictures)
				}
				if(userTask&&userTask.files){
					this.handleFilesShow(userTask.files, userTask)
				}
			})
		},
		bindfocus(e){
			this.showUpload = true
		},
		bindblur(){
			// this.showUpload = false
			window.scroll(0,0);
		},
		bindinput(e){
		},
		submitTask(item){
			let list = this.sendImages.concat(this.sendfiles)
	
			// return
			if(!this.editorInfo.content){
				this.utils.showToast('请填写任务详情')
				return
			}
			if(this.sendImages.length==0) {
				this.utils.showToast('需上传图片')
				return
			}
			this.api.post('ordinary/commitTask', {
				taskId: item.id,
				content: this.editorInfo.content,
				files: JSON.stringify(list)
			}).then(res=>{
				if(res.data.state!='ok') return
				getApp().globalData.isRefreshContent = true
				this.utils.showToast('发布成功')
				setTimeout(()=>{
					this.getTaskDetails()
				}, 1000)
				
			})
		},
		onEditorReady(e){
				uni.createSelectorQuery().select('#editor').context((res) => {
				this.editorCtx = res.context
			}).exec()
		},
		clickEmoji(page){
			this.editorCtx.insertImage({
				src: page.src,
				alt: page.name,
				width:20,
				height:20,
				extClass:'editor-emoji-iamge',
				success: function() {
					// console.log('insert image success')
				}
			})
			
		},
		chooseFile(type, list, sendList){
			if(type==1){
				this.sendImages = this.sendImages.concat(sendList)
				if(this.sendImages.length>9){
					this.utils.showToast('最多可以上传9张图片')
					this.sendImages.splice(9)
				}
			}else{
				this.sendfiles = this.sendfiles.concat(sendList)
				if(this.sendfiles.length>3){
					this.utils.showToast('最多可以上传3个文件')
					this.sendfiles.splice(3)
				}
			}
			
		},
		closePopup(){
			this.showUpload = false
		},
		handleFilesShow(list, item){
			list = JSON.parse(list)
			// console.log(223, list)
			// return
			let imgs = [], files = [], dst_files = []
			for(let i=0; i<list.length; i++){
				if(list[i].msgType==8){
					files.push(list[i])
					dst_files.push(list[i])
				}else{
					imgs.push(this.api.xiaodeObsUrl + list[i].path)
				}
				
			}

			this.$set(this.detailInfo, 'files', dst_files)
			this.$set(this.detailInfo, 'dst_imgs', imgs)

		},
		delFiles(i, sendItem){
			sendItem.splice(i, 1)
		},
		previewImage(list, i){
			// console.log(list)
			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
	}
}
</script>
<style lang="less" scoped>
	.task-details{
		border-top: 1rpx solid #E5E5E5;
		padding: 40rpx 32rpx;
	}
	.title{
		color: #333;
		line-height: 40rpx;
		font-weight: 600;
	}
	.content{
		margin-top: 24rpx;
		color: #666666;
		line-height: 44rpx;
	}
	.images{
		margin-top: 32rpx;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
			margin-right: 22rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.textarea-box{
		margin-top: 32rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
		padding: 32rpx;
		.tips{
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	textarea{
		width: 100%;
		font-size: 28rpx;
	}
	.textarea-box1{
		margin-top: 32rpx;
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 32rpx;
		.content{
			p{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
		}
	}
	.all-img-file{
		margin-top: 24rpx;
		font-size: 0;
		.img{
			width: 194rpx;
			height: 194rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
		.img-box{
			display: inline-block;
			width: 194rpx;
			height: 194rpx;
			position: relative;
			margin-right: 18rpx;
			margin-bottom: 20rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
		.close{
			position: absolute;
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
		}
		.file-box{
			margin-top: 32rpx;
			width: 560rpx;
			position: relative;
		}
	}

	.time-publish{
		margin-top: 24rpx;
		color: #999;
		font-size: 24rpx;
		
		margin-bottom: 40rpx;
	}
	.eva-content{
		margin-top: 64rpx;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			top: -32rpx;
			content: '';
			width: 200%;
			border-width: 2rpx;
			border-style: dashed;
			border-color: #000;
			transform: scale(0.5) translateX(-50%);
            opacity: .1;
		}
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 78rpx;
			height: 78rpx;
			border-radius: 156rpx;
			margin-right: 24rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		image{
			margin-right: 17rpx;
			width: 34rpx;
			height: 32rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.pub-btn{
		margin-top: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		border-radius: 20rpx;
		background-color: #28C2CD;
		font-size: 32rpx;
		text-align: center;
	}
	
</style>